<script setup lang="ts">
import type { Subject } from '@/api/subject/type';
import { router } from '@/router';
import { computed, ref } from 'vue';

const props = defineProps({
  modelValue: {
    type: Object as () => Subject,
    required: true
  }
});

const subject = computed(() => props.modelValue);

const toManage = () => {
  if (subject.value.id != null && subject.value.id != undefined) {
    router.push({
      name: 'SubjectManage',
      query: {
        "id": subject.value.id
      }
    });
  }
}
</script>

<template>
  <div class="subject-info">
    <div class="subject-avatar">
      <van-image
          :src="subject.avatar"
          width="100%"
          height="100%"
          fit="cover"
          radius="8px"
      />
    </div>
    
    <div class="subject-description">
      <h1 class="subject-title">{{ subject.name || '题目集名称' }}</h1>
      
      <div class="subject-meta">
        <div class="meta-item">
          <van-icon name="manager" />
          <span>创建者: {{ subject.creator.nickname }}</span>
        </div>
      </div>
      
      <p class="subject-intro">{{ subject.description || '这个题目集还没有添加描述。' }}</p>
      
      <div class="subject-actions">
        <button class="action-button primary" @click="toManage">
          <van-icon name="setting-o" />
          <span>管理题目</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.subject-info {
  display: flex;
  gap: 24px;
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  
  .subject-avatar {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f7fa;
  }
  
  .subject-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .subject-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 16px 0;
    }
    
    .subject-meta {
      margin-bottom: 16px;
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #606266;
        font-size: 14px;
      }
    }
    
    .subject-intro {
      font-size: 14px;
      color: #606266;
      line-height: 1.8;
      margin: 0 0 24px 0;
      flex: 1;
    }
    
    .subject-actions {
      display: flex;
      justify-content: flex-end;
      
      .action-button {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 16px;
        border-radius: 18px;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid #dcdfe6;
        background-color: #fff;
        color: #606266;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        &.primary {
          background-color: #409eff;
          border-color: #409eff;
          color: white;
          
          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .subject-info {
    flex-direction: column;
    
    .subject-avatar {
      width: 100%;
      height: 200px;
    }
  }
}
</style>